<template>
    <div class="container">
        <a-page-header title="白名单" @back="() => router.back()"></a-page-header>
        <a-table :columns="columns" :data-source="tableData" :scroll="{ y: 1000 }" :pagination @change="changeData">

        </a-table>
    </div>
</template>
<script setup lang="ts">
import TableColumns from '@/utils/TableColumns';
import { db } from '@/utils/DexieDB';
import { computed, ref } from 'vue';
import { useRouter } from 'vue-router';

const router = useRouter()
const tableData = ref<white[]>([])
const columns = TableColumns.whites

const currentPage = ref(1);
const pageSize = ref(15);

const pagination = computed(() => {
    return {
        total: tableData.value.length,
        showTotal: () => `总共${tableData.value.length}条数据`,
        pageSize: pageSize.value,
        current: currentPage.value,
        hideOnSinglePage: true,
        onChange: (page: number, size: number) => {
            currentPage.value = page;
            pageSize.value = size;
        }
    }
})

getData()
function getData() {
    db.whites.toArray().then((res) => {
        tableData.value = res
    })
}


function changeData(pagination: any) {
    currentPage.value = pagination.current;
    pageSize.value = pagination.pageSize;
}

</script>
<style lang="scss" scoped>
.container {
    width: 100%;
    height: 100vh;
    overflow: auto;

    // :deep(.ant-page-header) {
    //     position: sticky;
    //     top: 0;
    //     z-index: 1;
    //     background-color: #fff;
    //     width: 100%;
    // }

    // :deep(.ant-page-header-back) {
    //     font-size: .4rem;
    // }

    // :deep(.ant-page-header-heading-title) {
    //     font-size: .5rem;
    //     line-height: .6rem;
    // }

}

:deep(.ant-table-tbody>tr>td) {
    font-size: .25rem;
}

:deep(.ant-table-thead>tr>th) {
    font-size: .3rem;
}

:deep(.ant-table-thead > tr > th),
:deep(.ant-table-tbody > tr > td) {
    padding: .2rem .1rem;
}
</style>